<page-header [content]="content" [extra]="extra">
  <ng-template #content>
    <div class="avatar">
      <img class="img" src=" https://upload-images.jianshu.io/upload_images/1979022-b6bb0a2dad6c7f3d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
        width="100px" height="100px">
      <br>
      <span>微信扫一扫关注</span>
    </div>
    <div class="desc">
      <div class="desc-title">有事没事就请访问
        <a href="//www.52abp.com" target="_blank">52ABP社区</a>
      </div>
      <div>假砖家 | 我们是一群业余的搞一个专业的事情。</div>
      <div> 点击加入交流QQ群：
        <a href="https://jq.qq.com/?_wv=1027&k=5He28dh">633751348 【52ABP .NET CORE 实战群】</a>
      </div>
    </div>
  </ng-template>
  <ng-template #extra>
    <div class="page-extra">
      <div>
        <p>项目数</p>
        <p>56</p>
      </div>
      <div>
        <p>团队内排名</p>
        <p>8
          <span> / 24</span>
        </p>
      </div>
      <div>
        <p>项目访问</p>
        <p>2,223</p>
      </div>
    </div>
  </ng-template>
</page-header>

<!-- <img src="https://edu-image.nosdn.127.net/0300916b-24c4-491b-9665-a0d367ac0b9e.jpg?imageView&quality=100&crop=0_0_1920_1077&thumbnail=450y250"
alt="ASP.NETCore&angular6快速开发购买课程"> -->
<!-- 演示卡片数据 -->
<div nz-row nzGutter="16">
  <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
    <div nz-row nzType="flex" nzAlign="middle" class="bg-primary rounded-md">
      <div nz-col nzSpan="12" class="p-md text-white">
        <div class="h2 mt0">在线Demo：<a style="color:whitesmoke" href="https://free.yoyocms.com">https://free.yoyocms.com</a></div>
        <p class="text-nowrap mb0">账号：admin 密码：123qwe</p>
      </div>
      <div nz-col nzSpan="12">
        <g2-mini-bar height="35" color="#fff" borderWidth="3" [padding]="[36, 30, 30, 30]"></g2-mini-bar>
      </div>
    </div>
  </div>
  <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md">
    <div nz-row nzType="flex" nzAlign="middle" class="bg-success rounded-md">
      <div nz-col nzSpan="18" class="p-md text-white">
        <div class="h2 mt0">52ABP开发者中心</div>
        <p class="text-nowrap mb0">传送门： <a href="https://www.52abp.com/Wiki/52abp/latest/docs/Introduction" target="_blank">52ABP官方文档内容-ASP.NET
            COR</a> </p>
      </div>
      <div nz-col nzSpan="12">
        <g2-mini-bar height="35" color="#fff" borderWidth="3" [padding]="[36, 30, 30, 30]"></g2-mini-bar>
      </div>
    </div>
  </div>
  <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md" (click)="showAdvertising()">
    <div nz-row nzType="flex" nzAlign="middle" class="bg-orange rounded-md">
      <div nz-col nzSpan="12" class="p-md text-white">
        <div class="h2 mt0">惊爆!点一下,玩一年</div>
        <p class="text-nowrap mb0">飞蝗芜湖</p>
      </div>
      <div nz-col nzSpan="12">
        <g2-mini-bar height="35" color="#fff" borderWidth="3" [padding]="[36, 30, 30, 30]"></g2-mini-bar>
      </div>
    </div>
  </div>
  <div nz-col nzXs="24" nzSm="12" nzMd="6" class="mb-md" (click)="showAdvertising()">
    <div nz-row nzType="flex" nzAlign="middle" class="bg-magenta rounded-md">
      <div nz-col nzSpan="12" class="p-md text-white">
        <div class="h2 mt0">惊爆!点一下,玩一年</div>
        <p class="text-nowrap mb0">Emmmmm...</p>
      </div>
      <div nz-col nzSpan="12">
        <g2-mini-bar height="35" color="#fff" borderWidth="3" [padding]="[36, 30, 30, 30]"></g2-mini-bar>
      </div>
    </div>
  </div>
</div>


<div nz-row [nzGutter]="24">
  <div nz-col nzXs="24" nzSm="24" nzMd="24">
    <nz-card nzTitle="52ABP模板项目中的技术栈" [nzBordered]="false" [nzLoading]="loading" class="ant-card__body-nopadding mb-lg project-list">
      <div *ngFor="let item of notice" nz-card-grid class="project-grid">
        <nz-card [nzBordered]="false" class="ant-card__body-nopadding mb0">
          <nz-card-meta [nzTitle]="noticeTitle" [nzDescription]="item.description">
            <ng-template #noticeTitle>
              <div class="card-title">
                <nz-avatar [nzSrc]="item.logo" [nzSize]="'small'"></nz-avatar>
                <a [href]="item.href" target="_blank">{{item.title}}</a>
              </div>
            </ng-template>
          </nz-card-meta>
          <div class="project-item">
            <!-- <a (click)="msg.info('show user: ' + item.member)">{{item.member}}</a>
              <span *ngIf="item.updatedAt" class="datetime" title="{{item.updatedAt}}">
                {{item.updatedAt | _date: 'fn' }}
              </span> -->
          </div>
        </nz-card>
      </div>
    </nz-card>

  </div>


</div>


<!-- 更多资料  -->
<nz-row nzGutter="24">
  <nz-col nzSpan="24">
    <nz-card nzTitle="更多资料" [nzBordered]="false" [nzBodyStyle]="{'padding-top.px': 12, 'padding-bottom.px': 12 }" class="mb-lg">
      <div class="members">
        <div nz-row [nzGutter]="48">
          <div nz-col [nzSpan]="12" *ngFor="let i of members">
            <a href="{{i.link}}" target="_blank">
              <nz-avatar [nzSrc]="i.logo" [nzSize]="'small'"></nz-avatar>
              <span class="member">{{i.title}}</span>
            </a>
          </div>
        </div>
      </div>
    </nz-card>
  </nz-col>
</nz-row>
